import React, { useEffect, useState } from 'react'

import { Table, message, Skeleton, Segmented, Switch } from 'antd';


import styles from './index.module.css'

//网络请求
import { getLatestCase } from '../../../utils/axiosRequest/api'
//列
import { columns } from '../../../constant/caseColumn'

function CaseStatus() {
    //消息提示
    const [messageApi, contextHolder] = message.useMessage();
    //表格展示数据
    const [showDataSource, setShowDataSource] = useState([]);
    //当前时间
    const [currentTime, setCurrentTime] = useState('');
    //加载状态
    const [isLoad, setLoad] = useState(false);
    //表格源数据
    const [dataSource, setDataSource] = useState([]);
    //当前滑块状态
    const [segmentedValue, setSegmentedValue] = useState('核查');
    //自动刷新开关
    const intervalRef = React.useRef();


    //[]空数组相当于componentDidMount
    useEffect(() => {
        intervalRef.current = false
        //获取网络数据
        getNetworkData()
        const intervalId = setInterval(function () {
            if (intervalRef.current) {
                getNetworkData()
            }
        }, 1000 * 60);

        //返回的函数相当于unmountComponentAtNode
        return () => {
            clearInterval(intervalId);
        }
    }, []);

    //监听状态-》改变数据
    useEffect(() => {
        filtraData()
    }, [segmentedValue, dataSource]);

    function getNetworkData() {
        //获取网络数据
        setLoad(true)
        const params = new Map()
        getLatestCase(params)
            .then(response => {
                setLoad(false)
                const data = response.data
                if (data.code === 1000) {
                    handleData(data.data)
                    setCurrentTime(new Date().toLocaleTimeString())
                } else {
                    //处理失败
                    messageApi.open({ type: 'error', content: data.des });
                }
            })
            .catch(error => {
                setLoad(false)
                messageApi.open({ type: 'error', content: error.message });
            });
    }

    function handleData(caseList) {
        const tempData = [];
        const length = caseList.length;
        for (let i = 0; i < length; i++) {
            tempData.push({
                key: i,
                eventCode: caseList[i].eventcode,
                eventDesc: caseList[i].eventDesc,
                eventTime: caseList[i].eventTime.replace("T", " "),
                currentStepName: caseList[i].currentStepName,
                currentDeptName: caseList[i].currentDeptName,
                currentDealPeopleName: caseList[i].currentDealPeopleName,
                lastUpdateTime: caseList[i].lastUpdateTime,
                fileUrls: caseList[i].fileUrls,
            })
        }
        //保存全量案件数据
        setDataSource(tempData)
    }


    function filtraData() {
        const tempData = [];
        const length = dataSource.length;
        let serial = 0;
        for (let i = 0; i < length; i++) {
            //当前处理环节
            const currentStepName = dataSource[i].currentStepName;
            if (currentStepName.includes(segmentedValue)) {
                serial = serial + 1
                tempData.push({
                    key: i,
                    serial: serial,
                    eventCode: dataSource[i].eventCode,
                    eventDesc: dataSource[i].eventDesc,
                    eventTime: dataSource[i].eventTime.replace("T", " "),
                    currentStepName: dataSource[i].currentStepName,
                    currentDeptName: dataSource[i].currentDeptName,
                    currentDealPeopleName: dataSource[i].currentDealPeopleName,
                    lastUpdateTime: dataSource[i].lastUpdateTime,
                    fileUrls: dataSource[i].fileUrls,
                })
            }
        }
        setShowDataSource(tempData)
    }

    function changeSegmented(value) {
        //设置当前滑块状态
        setSegmentedValue((pre) => (value))
    }

    function switchChange(checked) {
        intervalRef.current = checked;
    }

    return (
        <div className={styles.container}>
            {contextHolder}

            <div className={styles.segmented}>
                <Segmented
                    size="large"
                    options={['核查', '办结', '派遣', '挂账']}
                    onChange={changeSegmented} />
            </div>

            <Skeleton loading={isLoad}>
                <Table title={() => {
                    return (
                        <div className={styles.header}>
                            <span className={styles.time} >更新时间:{currentTime}</span>
                            <Switch defaultChecked={intervalRef.current} onChange={switchChange} className={styles.switch} checkedChildren="开启" unCheckedChildren="关闭" />
                            <span className={styles.auto}>自动刷新</span>
                        </div>
                    )
                }} size={'small'}
                    pagination={{ showSizeChanger: false, pageSize: '12', position: ['bottomCenter'], defaultCurrent: '1', total: showDataSource.length }}
                    bordered={true} dataSource={showDataSource} columns={columns} scroll={{ y: 540, x: 1500 }} />;
            </Skeleton>

        </div>
    )
}

export default CaseStatus;
